$(function () {

    findCuisineAll();
})

function findCuisineAll() {
    let res = myAjax("/cuisine/findAll", {}, "get");
    if (res != null) {
        setCuisineData(res);
    }
}

function setCuisineData(data) {
    let cuisineId = 0;
    let html = '';
    for (let i = 0; i < data.length; i++) {
        if (i == 0) {
            cuisineId = data[0].id;
        }
        html += ' <div id="cuisine' + data[i].id + '" onclick="findProductAll(' + data[i].id + ')">' + data[i].name + '</div>';
    }
    $("#cuisine").html(html);
    //设置菜系颜色默认第一个
    $("#cuisine" + cuisineId).addClass("mouseClick");
    // let cuisineId = sessionStorage.getItem("cuisineId");
    // findProductAll(cuisineId);
}

function findProductAll(cuisineId) {
    //点击菜系时，将所有的背景情况，然后对当前的div设置背景
    $("#cuisine >div").each(function (res) {
        $(this).removeClass("mouseClick");
    })
    $("#cuisine" + cuisineId).addClass("mouseClick");
    // let res = myAjax("/product/findAll", {cuisineId: cuisineId}, "get");
    // if (res != null) {
    //     setProductData(res);
    // }
    setProductData({});
}

function setProductData(data) {
    let html = '';
    for (let i = 0; i < 8; i++) {
        html += '<div>\n' +
            '                        <div><img src="../img/luomihongzao.jpg"/></div>\n' +
            '                        <div class="font-title single-over">糯米红枣</div>\n' +
            '                        <div>\n' +
            '                            <!--                            div有11个字符 h 有可能还会设置其他样式,如颜色，字体大小，字体等其他很多样式-->\n' +
            '                            <div class="font-content">价格：</div>\n' +
            '                            <div>8：00</div>\n' +
            '                        </div>\n' +
            '                        <div class="font-content many-over-two">原材料：红枣，糯米</div>\n' +
            '                    </div>';
    }
    $("#product").html(html);
}